<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
      .focus_box input {
            width:250 px;
            height: 50px;
            border-radius: 10px;
            border: 1px solid #252c3974;
            box-shadow: 4px 5px 6px 1px #3e3d3d9b;
            margin: 9px;
        }

        .focus_box input:nth-of-type(1):focus {
            background-color: #2019a1;
            border: 5px solid #073f5c;
            outline: 3px solid #46cf56;
        }

        .focus_box input:nth-of-type(2):focus {
            background-color: #450c0c;
            border: 5px solid #824222;
            outline: 3px solid #58440c;
        }

        .focus_box input:nth-of-type(3):focus {
            background-color: #1b1a63;
            border: 5px solid #331743;
            outline: 3px solid #633d66;
        }
</style>
<body>
    <div class="focus_box w">
    
        <input type="text">
        <input type="text">
        <input type="text">
    </div>
</body>
</html>